<template>
    <div>
        <h1>聊天界面</h1>
        <ul class="chat">
            <li v-for="(c,index) in props.chatdata[route.params.id]" :key="index" :class="{self:c.self}">
                {{c.msg}}
            </li>
        </ul>
        <input type="text" v-model="text" @keydown.enter="send"/>
    </div>
</template>

<script setup>
// this.$route.params.id
import { useRoute} from 'vue-router';
import {ref} from 'vue'
let route=useRoute();
let props=defineProps(["chatdata"]);
let emits=defineEmits(["add-message"])
// ref([]) 自动转化reactive      reactive("")不能. 
//let a=reactive({})  a={} 赋值失去响应式   let b=reactive({a: {} })  b.a={} 正常
// let c=ref({});  c.value={} 正常
let text=ref("");
let send=()=>{
    emits("add-message",{
        self:true,
        msg:text.value,
        id:route.params.id
    });
    text.value=""
}



</script>

<style scoped>
.chat li{
    text-align: left;
}
.chat li.self{
    text-align: right;
}
</style>